<template>
    <div class="bg-[#fff]  rounded-[1.1rem] border border-[#F3F4F6] p-[1.5rem] shadow-[0px_2px_8px_0px_#0F172A0A]">
        <p class="text-[1rem] font-[Inter] font-normal leading-[1.5rem] text-[#000000] flex items-center gap-[0.5rem]"><img src="/public/icon/fire.png" class="w-[0.75rem] h-[1rem]" />热门文章</p>
        <div class="flex flex-col gap-[1rem]">
            <div class="flex items-center justify-start" v-for="item in data" :key="item.order">
                <div :class="orderClass(item.order)"
                class="w-[1.5rem] h-[1.5rem] text-[0.875rem] font-[Inter] font-bold leading-[1.25rem] flex items-center justify-center rounded-[0.5rem] flex-shrink-0">{{ item.order }}</div>
                <div class="flex flex-col ml-[0.75rem] w-[calc(100%-2.25rem)] gap-[0.2rem]">
                    <p class="truncate text-[0.875rem] font-[Inter] font-medium leading-[1.25rem] text-[#000000]">{{ item.title }}</p>
                    <p class="text-[0.75rem] font-[Inter] font-normal leading-[1rem] text-[#6B7280]">{{ item.dianzan }}点赞 · {{ item.comment }}评论</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const orderClass = (order: number) => {
  if (order === 1) return 'bg-[#EF4444] text-[#fff]'
  if (order === 2) return 'bg-[#F97316] text-[#fff]'
  if (order === 3) return 'bg-[#EAB308] text-[#fff]'
  // 4、5及之后
  return 'bg-[#E5E7EB] text-[#4B5563]'
}
const data = ref([
    {
        title: '20:00 到，第 9 年的 "418 活动"正式开始,xxxxxx',
        order: 1,
        dianzan: 100,
        comment: 100,
    },
    {
        title: '欢迎 70000 位朋友，让我们一起成长,xxxxxx',
        order: 2,
        dianzan: 100,
        comment: 100,
    },
    {
        title: '分享：如何在一个月内完成个人成,xxxxxx',
        order: 3,
        dianzan: 100,
        comment: 100,
    }, 
    {
        title: '新手必读：社区指南和最佳实践',
        order: 4,
        dianzan: 100,
        comment: 100,
    },
    {
        title: '经验分享：如何写出高质量的技术,xxxxxx',
        order: 5,
        dianzan: 100,
        comment: 100,
    },

])
</script>
<style scoped lang="scss">

</style>
